<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 模板里面有多个插槽的时候 
    使用组件的时候怎么知道具体替换哪一个 -->

<body>
    <div id="hello">
        <cpn>
            <p>没有slot属性的时候会替换全部没有name属性的插槽 但是不会替换有Name的插槽</p>
        </cpn>
        <!-- 使用solt属性 指定替换哪一个插槽 -->
        <cpn>
            <!-- <span slot="center">主页</span>
            <span slot="center">主页2</span> -->
           <template v-slot:center>
                <span>这是vslot的用法</span>
               <span>主页3</span>
           </template>
        </cpn>
    </div>
    <template id="cpn1">
        <div>
            <slot name='left'><span>左边</span></slot>
            <slot name='center'><span>中间</span></slot>
            <slot name='right'><span>右边</span></slot>
            <slot></slot>
            <slot></slot>
            <slot></slot>
        </div>
    </template>
    <script src="../../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            components: {
                cpn: {
                    template: '#cpn1',
                }
            }
        })
    </script>
</body>

</html>